<template>
  <div>
    <el-timeline>
      <el-timeline-item
        v-for="(activity, index) in activities"
        :key="index"
        :timestamp="activity.updateTime" placement="top">
        <el-card shadow="hover" style="margin-bottom: 10px">
          <div style="margin-bottom: 20px">
            <el-link
              :underline="false"
              v-on:click.native="showBlog(activity)"
              style="font-weight: bold">
              <router-link to="/blog/showBlog" tag="span">
                {{ activity.title }}
              </router-link>
            </el-link>
          </div>
          <div style="margin-bottom: 10px">
            <span style="font-size: 12px">
              摘要：{{ activity.abstract }}...
              <el-link
                :underline="true"
                v-on:click.native="showBlog(activity)" class="underline">
                <router-link to="/blog/showBlog" tag="span">
                  &nbsp;阅读全文
                </router-link>
              </el-link>
            </span>
          </div>
          <span><el-tag>{{ activity.blogType }}</el-tag></span>
          <span>
          <el-tag
            type="warning"
            v-for="label in activity.blogLabel"
            :key="label" style="margin: 2px">
            <i class="fa fa-tag" aria-hidden="true"></i>
            {{ label }}
          </el-tag>
          </span>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
import qs from 'qs'
import marked from 'marked'
export default {
  name: "Center",
  data() {
    return {
      lid: '',
      start: 0,
      activities: [],
    }
  },
 /* watch: {
    "$store.state.tid"(){
      this.tid=this.$store.getters.getTid;
      console.log(this.tid);
      this.getBlogMessage();
    }
  },*/
  methods: {
    getTid(){
      this.bus.$on("sendLid",(msg)=>{
        this.lid=msg;
        this.getBlogMessage();
      })
    },
    getBlogMessage() {
      this.axios.post("/blog/queryBlogByLid", qs.stringify({
        lid: this.lid,
        start: this.start
      })).then((response) => {
        this.activities = [];
        let reg = /<\/?.+?\/?>/g;
        let regPre = /<pre>[\s\S]*<\/pre>/g;
        for (let i = 0; i < response.data.length; i++) {
          let labels = response.data[i].blogLabel.split(',');
          let blogs = {
            bid:'',
            title: '',
            author: '',
            createTime: '',
            updateTime: '',
            blogLabel: [],
            blogType: '',
            reads: 0,
            likeNum: 0,
            article: '',
            editType:1,
            abstract: '',
          };
          for (let j = 0; j < labels.length; j++) {
            blogs.blogLabel.push(labels[j]);
          }
          blogs.bid = response.data[i].bid;
          blogs.title = response.data[i].title;
          blogs.blogType = response.data[i].blogType;
          blogs.createTime = response.data[i].createTime;
          blogs.updateTime = response.data[i].updateTime;
          blogs.reads = response.data[i].reads;
          blogs.likeNum = response.data[i].likeNum;
          blogs.article = response.data[i].article;
          blogs.editType = response.data[i].editorType;
          let abstr = '';
          if (blogs.editType === 2) {
            abstr = marked(response.data[i].article).replace(regPre, "");
          } else {
            abstr = response.data[i].article.replace(regPre, "");
          }
          blogs.abstract = abstr.replace(reg, "").substring(0, 80);
          this.activities.push(blogs);
        }
      })
    },
    showBlog(blog) {
      this.$store.commit('setBlog', blog);
      sessionStorage.setItem("blogDetail",JSON.stringify(blog));
    }
  },
  mounted() {
    sessionStorage.removeItem("blogDetail");
    this.getTid();
  },
  destroyed() {
    this.bus.$off()
  },

}
</script>

<style scoped>
.underline{
  text-decoration: underline;
}
</style>
